<!--
 @Description 首页新闻分类组件
 @author hemengxia
 @date 2022/11/11
-->

<template>
  <section
    class="news-classify-comp"
    :class="{'sticky': sticky}"
    :style="{ 'margin-top': top,'margin-left': margins, 'margin-right': margins,'padding-left': paddingLeftRight,'padding-right': paddingLeftRight}"
  >
    <van-tabs
      v-model="active"
      :background="bgcolor"
      :title-inactive-color="textcolor"
      :title-active-color="currentcolor"
      :style="{'height': height}"
      :color="`${currentcolor ? currentcolor : ''}`"
      :ellipsis="false"
      @click="handleChange"
    >
      <van-tab
        v-for="(item,index) in list"
        :key="index"
        :style="{'color': textcolor}"
        :title="item.classifyName"
        :name="item.id"
      />
    </van-tabs>
  </section>
</template>
<script>
import mixins from './../mixins'

export default {
  name: 'IndexNewsClassifyComp',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    varInfo: {
      type: Object,
      default: () => {
      }
    },
    relation: {
      type: [Object, undefined],
      default: () => {
      }
    },
    isInitData: {
      type: Boolean,
      default: false
    }

  },
  data() {
    return {
      active: '',
      list: [],
      defaultList: [
        {
          'id': '1',
          'classifyName': '分类一'
        },
        {
          'id': '2',
          'classifyName': '分类二'
        }
      ],
      classifyConfig: [],
      // 分类名称
      classifyName: '',
      mainColor: sessionStorage.getItem('THEME_COLOR')
    }
  },
  computed: {
    sticky() {
      return this.option.sticky
    },
    bgcolor() {
      return this.option.bgcolor || ''
    },
    textcolor() {
      return this.option.textcolor || '#333'
    },
    currentcolor() {
      return this.option.isThemeColor ? this.option.currentcolor : this.mainColor
    }
  },
  async created() {
    if (this.isInitData) {
      await this.initData()
    } else {
      this.list = this.defaultList
    }
  },
  methods: {
    setData(result) {
      if (result?.configList?.data) {
        if (result?.configList?.data.configValue) {
          try {
            this.classifyConfig = JSON.parse(result?.configList?.data.configValue).index || []
          } catch (e) {
            this.classifyConfig = []
          }
        }
      }
      if (result?.classifyDataList?.data) {
        this.list = this.filterClassify(result?.classifyDataList?.data)
        this.handleChange(this)
      }
    },
    /**
     *根据系统配置处理分类排序问题
     * @param list
     * @returns {[]|*}
     */
    filterClassify(list) {
      const config = this.classifyConfig
      const arr = []
      // 全展示：没有配置、配置错误、为空、没有命中
      if (config && config instanceof Array && config.length > 0) {
        const sortConfig = config.sort((a, b) => {
          return b.sort - a.sort
        })
        sortConfig.forEach(item => {
          const obj = list.find(ite => {
            return ite.id === item.classifyId
          })
          if (obj) {
            arr.push(obj)
          }
        })
        return arr.length ? arr : list
      } else {
        return list
      }
    },

    getValue() {
      const { active, classifyName } = this
      return {
        active, classifyName
      }
    },

    setValue(k) {
      console.log('indexNewsClassifyComp-setValue', k)
      this.$set(this, 'active', k)
    },

    check() {
      return true
    },

    handleChange(e) {
      this.dispatch_event('filed-value-change', e)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';

.news-classify-comp {
  &.sticky {
    position: sticky;
    top: 0;
  }

  /deep/ {
    .van-tabs {
      .van-tab {
        font-size: rem(30);
        flex: 1 0 auto;
        padding: 0 rem(28);
        flex-basis: auto !important;
      }

      .van-hairline--top-bottom::after,
      .van-hairline-unset--top-bottom::after {
        border: none;
      }

      .van-tabs__line {
        width: rem(40) !important;
        height: rem(6);
        position: absolute;
        left: 0;
        z-index: 1;
        border-radius: rem(6);
      }

      .van-tabs__nav {
        background-color: transparent;
      }
    }
  }
}
</style>
